<template>
	<view class="content">
		<view class="bg">
			<view class="bg-img">
				<image src="/static/bgs.png" mode="aspectFill"></image>
			</view>

			<view class="components">
				<view class="">
					<view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
						<view class="main-title" :style="{ height: systemInfo.sBarHeight + 'px' }">{{ current == 0 ? '悦达' : '' }}</view>
					</view>
				</view>

				<view class="mine" v-if="current == 1">
					<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="show">
						<Minehome />
					</uni-transition>
				</view>

				<view class="index" v-else>
					<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :show="show">
						<IndexHome />
					</uni-transition>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="p-main" v-if="JSON.stringify(popData) != '{}'">
				<image src="/static/pbg.png" @click.stop="getCoupon"></image>
				<view class="cont" @click.stop="getCoupon">
					<view class="price">
						<view class="d">¥</view>
						<view class="p">{{ popData.denomination }}</view>
					</view>
					<view class="name">{{ popData.yhjName }}</view>
				</view>
			</view>
		</uni-popup>

		<Tab @sel="(index) => (current = index)" :v="current" />

		<view class="n" v-if="showNav" :style="{ height: systemInfo.titleTop + systemInfo.sBarHeight + 'px', paddingTop: systemInfo.titleTop + 'px' }">悦达</view>
	</view>
</template>

<script setup>
import Tab from '@/components/tabbar/tabbar.vue';
import IndexHome from './compnentsPage/indexHome.vue';
import Minehome from './compnentsPage/minehome.vue';
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { onPageScroll, onShow } from '@dcloudio/uni-app';
import { getPop, collectCoupon } from '@/api/apiList.js';
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';

onShareAppMessage(() => {
	return {
		path: '/pages/index/index',
		imageUrl: '/static/logo1.jpg',
		title: '悦达停车优选'
	};
});

onShareTimeline(() => {
	return {
		path: '/pages/index/index',
		imageUrl: '/static/logo1.jpg',
		title: '悦达停车优选'
	};
});

// 获取弹窗
let popup = ref(null);
let popData = ref({});
const getPopData = async () => {
	const res = await getPop();
	if (res.code == 200) {
		popData.value = res.data;
		console.log(popData.value, 'popData.value');
		nextTick(() => {
			if (popData.value.collect == 0) {
				popup.value.open();
			}
		});
	}
};

// 领取优惠券
const getCoupon = async () => {
	uni.showLoading({
		title: '正在领取',
		icon: 'none'
	});
	const res = await collectCoupon({ yhjId: popData.value.yhjId });
	if (res.code == 200) {
		popData.value.collect = 2;
		uni.hideLoading();
		popup.value.close();
		uni.showToast({
			title: '领取成功',
			icon: 'none'
		});
	} else {
		uni.hideLoading();
		popup.value.close();
		uni.showToast({
			title: res.msg,
			icon: 'none'
		});
	}
};

onMounted(async () => {
	await getPopData();
});

const show = ref(true);
const modeClass = computed(() => {
	return current.value == 0 ? ['fade', 'slide-left'] : ['fade', 'slide-right'];
});
const current = ref(0);
const capsule = uni.getStorageSync('capsule');
let systemInfo = uni.getStorageSync('systemInfo');

const showNav = ref(false);
onPageScroll((res) => {
	const { scrollTop } = res;
	showNav.value = scrollTop >= 40 ? true : false;
});
</script>

<style lang="scss" scoped>
.p-main {
	width: 638rpx;
	height: 585rpx;
	position: relative;
	image {
		width: 638rpx;
		height: 585rpx;
	}
	.cont {
		display: flex;
		align-items: center;
		position: absolute;
		top: 365rpx;
		left: 171rpx;
		width: 100%;
		height: 60rpx;
		.price {
			display: flex;
			align-items: center;
			margin-right: 39rpx;
			.d {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 22rpx;
				color: #000000;
				line-height: 24rpx;
			}
			.p {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #000000;
				line-height: 24rpx;
			}
		}
		.name {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
			line-height: 24rpx;
		}
	}
}
.n {
	background: rgb(245, 152, 94);
	background: linear-gradient(180deg, rgba(245, 152, 94, 1) 0%, rgba(255, 128, 102, 1) 0%, rgba(239, 197, 176, 1) 100%, rgba(240, 182, 173, 1) 100%, rgba(249, 142, 95, 1) 100%);
	// height: 54rpx;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 36rpx;
	color: #ffffff;
	line-height: 24rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	// z-index: 1;
	// left: 0;
	// right: 0;
}
.bg {
	position: relative;
	.bg-img {
		image {
			height: 479rpx;
			width: 100%;
		}
	}
	.components {
		position: absolute;
		// top: var(--status-bar-height);
		padding-bottom: 166rpx;
		top: 0;
		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750rpx;
			.main-title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 24rpx;
			}
		}
	}
}
</style>
